<template>
  <div class="tuanlist">
    <div class="btn">
      <span @click="active(0)" :class="{ active: Num == 0 }">正在抢购</span>
      <span @click="active(1)" :class="{ active: Num == 1 }">上新预告</span>
    </div>
    <div class="tuan1">
      <div class="list" v-for="(item, index) in tuanlist" :key="index">
        <div class="imgbox">
          <img v-lazy="item.picture" alt="" />
        </div>
        <div class="text">
          <p>{{ item.name }}</p>
          <h2>{{ item.name }}</h2>
          <div class="pirce">
            <div class="left">
              <span>爆爆团价</span>
              <div class="discount">
                <span>￥{{ item.min_price }}</span>
                <!-- <span>{{item.promotion_info}}</span> -->
              </div>
              <del>￥{{ item.min_price }}</del>
            </div>
            <div class="right">
              <div class="btns">马上抢</div>
              <p>{{ item.month_saled_content }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { tuan } from "@/utils/api";
export default {
  data() {
    return {
      Num: 0,
      tuanlist: [],
    };
  },
  mounted() {
    tuan({ status: 0 }).then((res) => {
      console.log(res.data);
      this.tuanlist = res.data.list;
    });
  },
  methods: {
    active(num) {
      tuan({ status: num }).then((res) => {
        console.log(res.data);
        this.tuanlist = res.data.list;
      });
      this.Num = num;
    },
  },
};
</script>

<style scoped lang="scss">
.tuanlist {
  margin: 0 0.2667rem;
  position: relative;
  top: -2.1333rem;
  .btn {
    margin: 0.4rem;
    span {
      font-size: 0.48rem;
      margin-right: 0.5333rem;
      padding-bottom: 0.08rem;
      color: #000;
    }
  }
  .tuan1 {
    background: #f5f5f5;
    border-radius: 0.2667rem;
    .list {
      width: 100%;
      box-sizing: border-box;
      padding: 0.2667rem;
      margin-bottom: 0.4rem;
      border-radius: 0.2667rem;
      background: white;
      display: flex;
      .imgbox {
        width: 2.6667rem;
        height: 2.6667rem;
        margin-right: 0.2667rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.1333rem;
        }
      }
      .text {
        flex: 1;
        p {
          font-size: 0.3733rem;
          color: #999;
          padding-bottom: 0.1333rem;
        }
        h2 {
          font-size: 0.48rem;
        }
        .pirce {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .left {
            display: flex;
            flex-direction: column;
            span:first-child {
              color: orange;
              font-size: 0.32rem;
              padding: 0.1333rem 0;
            }
            .discount {
              display: flex;
              align-items: center;
              span:first-child {
                color: red;
                font-size: 0.5333rem;
                font-weight: 600;
                margin-right: 0.1333rem;
              }
              span:last-child {
                font-size: 0.3733rem;
                border: 0.0267rem solid orangered;
                padding: 0.08rem;
                color: orangered;
                border-radius: 0.08rem;
              }
            }
            del {
              font-size: 0.3733rem;
              color: #ccc;
            }
          }
          .right {
            div {
              margin: 0.2667rem 0;
              line-height: 0.8rem;
              padding: 0.1333rem 0.4rem;
              background-color: red;
              color: white;
              border-radius: 0.5333rem;
              font-size: 0.4267rem;
            }
            p {
              text-align: center;
              color: red;
            }
          }
        }
      }
    }
  }
}
.active {
  border-bottom: 0.1rem solid #1989fa;
  font-weight: 700;
}
</style>